<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>请假审批</el-breadcrumb-item>
    </el-breadcrumb>
    <!--列表-->
    <el-table
      class="tb"
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" type="index" width="60">
      </el-table-column>
      <el-table-column
        sortable
        prop="lid"
        label="序列号"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="uid"
        label="用户名"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="lsdate"
        label="起始日期"
        width="250"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="ledate"
        label="结束日期"
        width="250"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="lreason"
        label="请假理由"
        width="250"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="ltype"
        label="请假类型"
        width="250"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="lstate"
        label="审批状态"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="passApply(scope.row)">同意</el-button>
          <el-button size="mini" type="danger" @click="refuseApply(scope.row)"
            >驳回</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { LeaveDataAll, leaveApprove } from "../../api/leaveMG";
export default {
  data() {
    return {
      leave: {
        lid: "",
        uid: "",
        uname: "",
        lsdate: "",
        ledate: "",
        ltype: "",
        lreason: "",
        lstate: "",
      },
      loading: false, //是显示加载
      listData: [],
    };
  },
  /**
   * 创建完毕
   */
  created() {
    this.checkAll();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    checkAll() {
      // 请求方法
      LeaveDataAll()
        .then((res) => {
          console.log(res);
          this.listData = res.data;
          console.log(this.listData);
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("保存失败，请稍后再试！");
        });
    },
    passApply(row) {
      this.leave.lid = row.lid;
      this.leave.uid = row.uid;
      this.leave.lsdate = row.lsdate;
      this.leave.ledate = row.ledate;
      this.leave.uname = row.uname;
      this.leave.ltype = row.ltype;
      this.leave.lreason = row.lreason;
      this.leave.lstate = "通过";
      var data = JSON.stringify(this.leave);
      leaveApprove(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.checkAll();
        } else {
          this.$message({
            type: "info",
            message: res.msg,
          });
        }
      });
    },
    //驳回申请
    refuseApply(row) {
      this.leave.lid = row.lid;
      this.leave.uid = row.uid;
      this.leave.lsdate = row.lsdate;
      this.leave.ledate = row.ledate;
      this.leave.ltype = row.ltype;
      this.leave.uname = row.uname;
      this.leave.lreason = row.lreason;
      this.leave.lstate = "拒绝";
      var data = JSON.stringify(this.leave);
      leaveApprove(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.checkAll();
        } else {
          this.$message({
            type: "info",
            message: res.msg,
          });
        }
      });
    },
    // 获取公司列表
    getdata(parameter) {
      this.loading = true;
      /***
       * 调用接口
       */
      LeaveDataAll(parameter)
        .then((res) => {
          this.loading = false;
          if (res.success == false) {
            this.$message({
              type: "info",
              message: res.msg,
            });
          } else {
            this.listData = res.data;
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page;
            this.pageparm.pageSize = this.formInline.limit;
            this.pageparm.total = res.count;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("菜单加载失败，请稍后再试！");
        });
    },
  },
};
</script>

<style scoped>
.tb {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 